<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-21 15:12:27
 * @LastEditTime: 2022-11-10 16:00:33
-->
<template>
  <div :class="[{'slot-info':noSlot.indexOf(statusName)==-1}]">
    <!--展示文字内容-->
    <div class="flex" v-if="msgSlot.indexOf(statusName)>-1">
      <Icon type="md-warning" :size="20" color="#13227a"
        style="line-height:50px;margin-right:10px;" />
      <p class="desc-text">{{slotMsg.message}}</p>
    </div>
    <!--引用驳回内容-->
    <div class="desc-detail" v-else-if="backSlot.indexOf(statusName)>-1">
      <div v-if="isBreakLowPrice==1">
        <div class="flex">
          <Icon type="md-warning" :size="20" color="#13227a"
            style="line-height:26px;margin-right:10px;" />
          <p class="desc-title">审核建议</p>
        </div>
        <p class="desc-reason">
          {{orBreakLowPrice.breakLowPriceReason}}</p>
        <div class="flex flex-horizontal-between">
          <p class="desc-reason">
            {{orBreakLowPrice.breakLowPriceDate}}</p>
          <p class="desc-reason">审核人：
            {{orBreakLowPrice.breakLowPriceAuditName}}</p>
        </div>
      </div>
      <div v-else>
        <div class="flex">
          <Icon type="md-warning" :size="20" color="#13227a"
            style="line-height:26px;margin-right:10px;" />
          <p class="desc-title">驳回原因</p>
        </div>
        <p class="desc-reason">
          {{slotMsg.message}}</p>
      </div>
    </div>
    <!--文字 + 链接-->
    <div v-else-if="viewSlot.indexOf(statusName)>-1">
      <div class="flex">
        <Icon type="md-warning" :size="20" color="#13227a"
          style="line-height:50px;margin-right:10px;" />
        <p class="desc-text">{{slotMsg.message}}<span @click="linkOrderParams(slotMsg)"
            class="view hand">查看详情</span></p>
      </div>
    </div>
    <!--图文-->
    <div v-else-if="statusSlot.indexOf(statusName)>-1">
      <div class="flex flex-horizontal-between">
        <div class="flex">
          <Icon type="md-warning" :size="20" color="#13227a"
            style="line-height:50px;margin-right:10px;" />
          <p class="desc-text">{{slotMsg.message.split('，')[0]}}</p>
        </div>
        <p>{{orderStatusName=='签约'?'退签':'退购'}}单编号：{{slotMsg.backCode}}<span
            @click="linkOrderParams(slotMsg)" class="view hand">查看详情</span></p>
      </div>
      <ul class="flex flex-wrap">
        <li v-for="(item,index) in msgList" :key="index"
          :style="{'width':item.inline?'100%':'50%'}">
          <template v-if="item.key=='residueBill' || item.key=='accumulateMoney'">
            <div v-if="orderStatusName=='签约'" class="flex">
              <p class="text-right name"><span
                  v-show="item.statusName">{{orderStatusName}}</span>{{item.name}}：</p>
              <p>{{$tool.formatterMoney(slotMsg[item.key])}}元</p>
            </div>
          </template>
          <template v-else-if="item.key=='orAnnexList'">
            <div class="flex">
              <p class="text-right name"><span
                  v-show="item.statusName">{{orderStatusName}}</span>{{item.name}}：</p>
              <enclosure-img :images="slotMsg.orAnnexList" :showDownLoad="false"
                :showDelete="false"> </enclosure-img>
            </div>
          </template>
          <template v-else>
            <div class="flex">
              <p class="text-right name"><span
                  v-show="item.statusName">{{orderStatusName=='签约'?'退签':'退购'}}</span>{{item.name}}：
              </p>
              <p>{{slotMsg[item.key]}}</p>
            </div>
          </template>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import enclosureImg from '@/components/enclosureImg.vue'
  export default {
    components: { enclosureImg },
    props: ['detailMsg', 'orderStatusName', 'buildingId', 'subscriptionId'],
    data() {
      return {
        isView: this.$route.meta.isbuild == 'nobuildpage' ? true : false, // 是否是汇总数据跳转
        slotMsg: {},
        msgList: [
        {
          name: '日期',
          key: 'backDate',
          statusName: true,
          inline: true,
        },
        {
          name: '累计已到账房款',
          key: 'accumulateMoney',
          statusName: false,
          inline: false,
        },
        {
          name: '剩余未到账房款',
          key: 'residueBill',
          statusName: false,
          inline: false,
        },
        {
          name: '原因',
          key: 'backReason',
          statusName: true,
          inline: true,
        },
        {
          name: '附件',
          key: 'orAnnexList',
          statusName: false,
          inline: true,
        }, ],
        statusName: '',
        noSlot: [
          '认购待审核',
          '认购未签约',
          '退购待审核',
          '签约待审核',
          '签约回款中',
          '退签待审核',
        ],
        backSlot: ['认购已驳回', '退购已驳回', '签约已驳回', '退签已驳回'],
        msgSlot: ['签约已全款', '签约已交房'],
        viewSlot: [
          '认购已退购',
          '认购已签约',
          '认购已退签',
          '退购已通过',
          '签约已退签',
          '退签已通过',
        ],
        statusSlot: ['认购退购中', '签约退签中'],
        isBreakLowPrice: 2,
        orBreakLowPrice: {}
      }
    },
    created() {
      this.slotMsg = { ...this.detailMsg.orContractWebInfoBackVO }
      this.statusName = this.detailMsg.orContractBaseInfoVO.statusName
      this.isBreakLowPrice = this.detailMsg.orContractBaseInfoVO.isBreakLowPrice
      this.orBreakLowPrice = this.detailMsg.orBreakLowPrice ? this.detailMsg.orBreakLowPrice :
      {}

      if (this.slotMsg.orAnnexList && this.slotMsg.orAnnexList != '-') {
        this.slotMsg.orAnnexList = JSON.parse(this.slotMsg.orAnnexList)
      } else {
        this.slotMsg.orAnnexList = []
      }
    },
    mounted() {},
    methods: {
      linkOrderParams(item) {
        // 认购: 'SUBSCRIPTION',
        // 退购: 'SUBSCRIPTION_BACK',
        // 签约: 'CONTRACT',
        // 退签: 'CONTRACT_BACK',
        let orderParams = {}
        switch (item.orderType) {
          case 'SUBSCRIPTION':
            orderParams = {
              orderNum: item.businessCode, // 单号
              businessId: item.businessId, // 业务id
              buildingId: this.buildingId,
              subscriptionId: ''
            }
            break
          case 'SUBSCRIPTION_BACK':
            orderParams = {
              orderNum: item.backCode, // 单号
              businessId: item.backId, // 业务id
              buildingId: this.buildingId,
              subscriptionId: ''
            }
            break
          case 'CONTRACT':
            orderParams = {
              orderNum: item.businessCode, // 单号
              businessId: item.businessId, // 业务id
              buildingId: this.buildingId,
              subscriptionId: this.subscriptionId,
            }
            break
          case 'CONTRACT_BACK':
            orderParams = {
              orderNum: item.backCode, // 单号
              businessId: item.backId, // 业务id
              buildingId: this.buildingId,
              subscriptionId: '',
            }
            break
          default:
            break
        }
        this.linkOrderFun(orderParams)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .slot-info {
    padding: 0 20px;
    background-color: #fefcec;

    p {
      line-height: 50px;
    }

    .desc-title {
      line-height: 30px;
    }

    .view {
      margin-left: 20px;
      color: #2d8cf0;
    }

    ul {
      li {
        width: 50%;
        line-height: 50px;

        .name {
          width: 150px;
        }
      }
    }
  }
</style>